#!/usr/local/bin/python
# -*- coding: utf-8 -*-

#################################################################
# 统计图表页面配置信息
#################################################################


STATISTICAL_CHART_HTML='''
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <style>
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  .col {
    padding-left: 0;
    padding-right: 0;
  }

  /* 设置深色背景 */
  body {
    background-color: #031A32;
    color: #FFFFFF; /* 设置文本颜色为白色 */
    height: 100%;
    margin: 0;
  }

  /* 调整 Bootstrap 警告框样式 */
  .alert {
    background-color: #1C2E4A;
    border: 1px solid #3d5269;
    color: #1FC3CE;
    font-size: 18px;
    margin-bottom: 15px;
    margin-left: 15%;	
    width: 500px;
  }

  /* 统一标题样式 */
  h2 {
    color: #1FC3CE; /* 统一标题颜色 */
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 25px; /* 统一标题字体大小 */
    font-weight: bold; /* 统一标题字体加粗 */
  }

  /* 调整 strong 标签的样式 */
  strong {
    color: #E29052; /* 将数字颜色改为橙色 */
    font-size: 20px;
  }

  /* 设置指定 id 元素的背景颜色 */
  #container_xxx {
    background-color: #031A32; /* 深蓝色背景 */
    
  }

  /* 调整图表容器的宽度 */
  .chart-container {
    width: calc(100% - 350px); /* 减去 container_xxx 的宽度和间距 */
    height: 400px;
    margin: 0;
    padding: 0;
    border: 2px solid #3d5269; /* 添加边框 */
    border-radius: 8px; /* 添加圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
  }


  }
</style>
</head>
<body style="height: 100%; margin: 0">

  <div class="row">
    <div id="container_xxx" class="col chart-container">
      <h2>年度数据看板</h2>
      <div class="alert">
        总资产：<strong id="total_property_value">213213.00</strong>
      </div>
      <div class="alert">
        总收入：<strong id="incomme_value">213213.00</strong>
      </div>
      <div class="alert">
        总支出：<strong id="expense_value">213213.00</strong>
      </div>
      <div class="alert">
        总结余：<strong id="surplus_value">213213.00</strong>
      </div>
    </div>
    <div id="balance_sheet_container" class="col chart-container bg-dark"></div>
  </div>

  <div class="divider"></div>

  <div class="divider"></div>

  <div class="row">
    <div id="income_statement_container" class="col chart-container bg-dark"></div>
	<div id="cash_flow_container" class="col chart-container bg-dark"></div>

  </div>

  <div class="divider"></div>

  <div class="row">
    <div id="debt_value_container" class="col chart-container bg-dark"></div>
    <div id="container_5" class="col chart-container bg-dark"></div>
  </div>


  <script type="text/javascript">
    var balanceSheetChart = echarts.init(document.getElementById('balance_sheet_container'));
	var incomeStatementChart = echarts.init(document.getElementById('income_statement_container'));
	var cashFlowChart = echarts.init(document.getElementById('cash_flow_container'));
	var debtValueChart = echarts.init(document.getElementById('debt_value_container'));

	dataValue = {
		'indicator_board_value': {
			'total_property': 1109475.8399999999,
			'income': 535246.78,
			'expense': 453309.3400000001,
			'surplus': 81937.43999999994
		},
		'balance_sheet_value': {
			'min_value': 900000,
			'date_time': ['2024.01', '2024.02', '2024.03', '2024.04', '2024.05', '2024.06', '2024.07', '2024.08', '2024.09', '2024.10', '2024.11', '2024.12'],
			'property_value': [1023281.6900000001, 1213661.4200000002, 1050588.3599999999, 1051076.79, 1042048.9600000001, 1078225.15, 1069913.21, 1079380.4500000002, 1109475.8399999999, 0.0, 0.0, 0.0]
		},
		'income_statement_value': {
			'date_time': ['2024.01', '2024.02', '2024.03', '2024.04', '2024.05', '2024.06', '2024.07', '2024.08', '2024.09', '2024.10', '2024.11', '2024.12'],
			'income': [31108.13, 235367.35, 53267.23, 28965.95, 28528.440000000002, 53080.52, 28879.95, 27432.74, 48616.47, 0.0, 0.0, 0.0],
			'expense': [49084.81, 33099.09, 213902.8, 43812.18, 22970.33, 37029.46, 16206.56, 17308.44, 19895.67, 0.0, 0.0, 0.0]
		},
		'debt_value': {
			'date_time': ['2024.01', '2024.02', '2024.03', '2024.04', '2024.05', '2024.06', '2024.07', '2024.08', '2024.09', '2024.10', '2024.11', '2024.12'],
			'huabei': [19394.260000000002, 6210.0599999999995, 5097.1, 20587.620000000003, 5047.180000000001, 25640.309999999994, 4737.09, 3821.58, 5350.6, 0.0, 0.0, 0.0],
			'credit': [305.02, 1580.02, 200.0, 9.89, 930.48, 410.98, 279.9, 486.8, 240.8, 0.0, 0.0, 0.0]
		}
	}

    var option = {
        title: {
          text: "变动趋势",
          left: "40%",
          top:"2%",
          textStyle: {
            fontSize: 25, /* 统一标题字体大小 */
            color: "#1FC3CE", /* 统一标题颜色 */
            fontWeight: "bold" /* 统一标题字体加粗 */
          }
        },
        backgroundColor: '#031A32',
        tooltip: {
            trigger: "axis",
            axisPointer: {
            type: "shadow",
            label: {
                show: true
            }
        },
        formatter(params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
            }
            return relVal;
        },
    },
    grid: {
        left: "10%",
        top: "20%",
        right: "5%",
        bottom: "10%"
    },
    legend: {
        data: ["各月资产变动"],
        top: "10%",
        right:"5%",
        textStyle: {
            color: "#1FC3CE",
            fontSize: 14
        },
        selected: {'昨日使用率': false}
    },
    xAxis: {
        data: [
            "2022.01",
            "2022.02",
            "2022.03",
            "2022.04",
            "2022.05",
            "2022.06",
            "2022.07",
            "2022.08",
            "2022.09",
            "2022.10",
            "2022.11",
            "2022.12"
        ],
        axisLine: {
            show: true,
            lineStyle: {
                color: "#3d5269",
                width: 1
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#396A87",
                fontSize: 14
            },
            interval: 0,
            rotate: 30
        }
    },
    yAxis: [{
            type: "value",
            name: "金额",
            nameTextStyle: {
                color: "#396A87",
                fontSize: 14
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: "#3d5269"
                }
            },
            axisTick: {
                show: true
            },
            axisLine: {
                show: true
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#396A87",
                    fontSize: 14
                },
                formatter:function(value,index){
                    return value.toFixed(1)
                }
            }
        }
    ],
    series: [
        {
            name: "各月资产变动",
            type: "bar",
            barWidth: 18,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#E29052"
                        },
                        {
                            offset: 1,
                            color: "#FA5A53"
                        }
                    ])
                }
            },
            data: [133, 23, 114, 67, 89, 35, 67, 96, 90, 46, 75, 85]
        }
    ]
  }
  
	
	//indicatorBoardOption= JSON.parse(JSON.stringify(option));	
	//indicatorBoardOption['title']['text']="年度数据看板"
	
	//展示资产负债表
	var balanceSheetOption = {
        title: {
          text: "变动趋势",
          left: "40%",
          top:"2%",
          textStyle: {
            fontSize: 25, /* 统一标题字体大小 */
            color: "#1FC3CE", /* 统一标题颜色 */
            fontWeight: "bold" /* 统一标题字体加粗 */
          }
        },
        backgroundColor: '#031A32',
        tooltip: {
            trigger: "axis",
            axisPointer: {
            type: "shadow",
            label: {
                show: true
            }
        },
        formatter(params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
            }
            return relVal;
        },
    },
    grid: {
        left: "10%",
        top: "20%",
        right: "5%",
        bottom: "10%"
    },
    legend: {
        data: ["各月资产变动"],
        top: "10%",
        right:"5%",
        textStyle: {
            color: "#1FC3CE",
            fontSize: 14
        },
        selected: {'昨日使用率': false}
    },
    xAxis: {
        data: [
            "2022.01",
            "2022.02",
            "2022.03",
            "2022.04",
            "2022.05",
            "2022.06",
            "2022.07",
            "2022.08",
            "2022.09",
            "2022.10",
            "2022.11",
            "2022.12"
        ],
        axisLine: {
            show: true,
            lineStyle: {
                color: "#3d5269",
                width: 1
            }
        },
        axisTick: {
            show: true,
            alignWithLabel: true
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#396A87",
                fontSize: 14
            },
            interval: 0,
            rotate: 30
        }
    },
    yAxis: [{
            type: "value",
            name: "金额",
            nameTextStyle: {
                color: "#396A87",
                fontSize: 14
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: "#3d5269"
                }
            },
            axisTick: {
                show: true
            },
            axisLine: {
                show: true
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#396A87",
                    fontSize: 14
                },
                formatter:function(value,index){
                    return value.toFixed(1)
                }
            }
        }
    ],
    series: [
        {
            name: "各月资产变动",
            type: "bar",
            barWidth: 18,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#E29052"
                        },
                        {
                            offset: 1,
                            color: "#FA5A53"
                        }
                    ])
                }
            },
            data: [133, 23, 114, 67, 89, 35, 67, 96, 90, 46, 75, 85]
        }
    ]
  }
		
	
	

	//展示收支表  
	var incomeStatementOption = {
                title: {
                  text: "各月收支趋势图",   
                  left: "40%",
                  top: "5%",
                  textStyle: {
                    fontSize: 25,
                    color:"#1FC3CE"
                  }
                }, 

                backgroundColor: '#031A32',
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true
                        }
                    },
                    formatter(params) {
                        var relVal = params[0].name;
                        for (var i = 0, l = params.length; i < l; i++) {
                            console.log('tooltip数据值',params[i].value)
                            //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
                            //relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2)
                            relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
                        }
                    return relVal;
                    },
                },
                grid: {
                    left: "10%",
                    top: "20%",
                    right: "5%",
                    bottom: "15%"
                },
                legend: {
                    data: ["收入", "支出"],
                    top: "10%",
                    right:"5%",
                    textStyle: {
                        color: "#1FC3CE",
                        fontSize: 14
                    },
                    
                },
                xAxis: {
                    data: dataValue["date_time"],
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: "#3d5269",
                            width: 1
                        }
                    },
                    axisTick: {
                        show: true, //隐藏X轴刻度
                        alignWithLabel: true
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#396A87", //X轴文字颜色
                            fontSize: 14
                        },
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: [{
                        type: "value",
                        name: "金额",
                        nameTextStyle: {
                            color: "#396A87",
                            fontSize: 14
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: "#3d5269"
                            }
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#396A87",
                                fontSize: 14
                            }
     
                        }
                    }
                ],
                series: [{
                        name: "收入",
                        type: "bar",
                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#00FFFF"
                                    },
                                    {
                                        offset: 1,
                                        color: "#0080FF"
                                    }
                                ])
                            }
                        },
                        data: dataValue["income"],
                    },
                    {
                        name: "支出",
                        type: "bar",
                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#E29052"
                                    },
                                    {
                                        offset: 1,
                                        color: "#FA5A53"
                                    }
                                ])
                            }
                        },
                        data: dataValue["expense"]//传入数据
                    }
                ]
            }// end option
		

	
	//展示现金流表  
	var cashFlowOption = {
                title: {
                  text: "各月现金流趋势图",   
                  left: "40%",
                  top: "5%",
                  textStyle: {
                    fontSize: 25,
                    color:"#1FC3CE"
                  }
                }, 

                backgroundColor: '#031A32',
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true
                        }
                    },
                    formatter(params) {
                        var relVal = params[0].name;
                        for (var i = 0, l = params.length; i < l; i++) {
                            console.log('tooltip数据值',params[i].value)
                            //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
                            //relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2)
                            relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
                        }
                    return relVal;
                    },
                },
                grid: {
                    left: "10%",
                    top: "20%",
                    right: "5%",
                    bottom: "15%"
                },
                legend: {
                    data: ["流入", "流出"],
                    top: "10%",
                    right:"5%",
                    textStyle: {
                        color: "#1FC3CE",
                        fontSize: 14
                    },
                    
                },
                xAxis: {
                    data: dataValue["date_time"],
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: "#3d5269",
                            width: 1
                        }
                    },
                    axisTick: {
                        show: true, //隐藏X轴刻度
                        alignWithLabel: true
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#396A87", //X轴文字颜色
                            fontSize: 14
                        },
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: [{
                        type: "value",
                        name: "金额",
                        nameTextStyle: {
                            color: "#396A87",
                            fontSize: 14
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: "#3d5269"
                            }
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#396A87",
                                fontSize: 14
                            }
     
                        }
                    }
                ],
                series: [{
                        name: "流入",
                        type: "bar",
                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#00FFFF"
                                    },
                                    {
                                        offset: 1,
                                        color: "#0080FF"
                                    }
                                ])
                            }
                        },
                        data: dataValue["inflow"],
                    },
                    {
                        name: "流出",
                        type: "bar",
                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#E29052"
                                    },
                                    {
                                        offset: 1,
                                        color: "#FA5A53"
                                    }
                                ])
                            }
                        },
                        data: dataValue["outflow"]//传入数据
                    }
                ]
            }// end option
		

	//展示负债表
	var debtValueOption = {
                title: {
                  text: "各月负债趋势图",   
                  left: "40%",
                  top: "5%",
                  textStyle: {
                    fontSize: 25,
                    color:"#1FC3CE"
                  }
                }, 

                backgroundColor: '#031A32',
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true
                        }
                    },
                    formatter(params) {
                        var relVal = params[0].name;
                        for (var i = 0, l = params.length; i < l; i++) {
                            console.log('tooltip数据值',params[i].value)
                            //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
                            //relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2)
                            relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
                        }
                    return relVal;
                    },
                },
                grid: {
                    left: "10%",
                    top: "20%",
                    right: "5%",
                    bottom: "15%"
                },
                legend: {
                    data: ["蚂蚁花呗", "信用卡"],
                    top: "10%",
                    right:"5%",
                    textStyle: {
                        color: "#1FC3CE",
                        fontSize: 14
                    },
                    
                },
                xAxis: {
                    data: dataValue["date_time"],
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: "#3d5269",
                            width: 1
                        }
                    },
                    axisTick: {
                        show: true, //隐藏X轴刻度
                        alignWithLabel: true
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#396A87", //X轴文字颜色
                            fontSize: 14
                        },
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: [{
                        type: "value",
                        name: "金额",
                        nameTextStyle: {
                            color: "#396A87",
                            fontSize: 14
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: "#3d5269"
                            }
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#396A87",
                                fontSize: 14
                            }
     
                        }
                    }
                ],
                series: [{
                        name: "蚂蚁花呗",
                        type: "bar",
                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#00FFFF"
                                    },
                                    {
                                        offset: 1,
                                        color: "#0080FF"
                                    }
                                ])
                            }
                        },
                        data: dataValue["huabei"],
                    },
                    {
                        name: "信用卡",
                        type: "bar",
                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#E29052"
                                    },
                                    {
                                        offset: 1,
                                        color: "#FA5A53"
                                    }
                                ])
                            }
                        },
                        data: dataValue["credit"]//传入数据
                    }
                ]
            }// end option
		
		
    //getJson(dataValue)

  function getJson(msg) {
    dataValue = msg;	
	
	
    totalPropertyValue = Number(dataValue['indicator_board_value']["total_property"]).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
    $("#total_property_value").html(totalPropertyValue)
    incommeValue = Number(dataValue['indicator_board_value']["income"]).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
    $("#incomme_value").html(incommeValue)
    expenseValue = Number(dataValue['indicator_board_value']["expense"]).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
    $("#expense_value").html(expenseValue)
    surplusValue = Number(dataValue['indicator_board_value']["surplus"]).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
    $("#surplus_value").html(surplusValue)
	
	
	//设置资产负债表数据
	balanceSheetOption['title']['text']="各月资产变动趋势"
	console.log(dataValue["balance_sheet_value"]['property_value'])
	balanceSheetOption['series'][0]['data']= dataValue["balance_sheet_value"]['property_value']	
	balanceSheetChart.setOption(balanceSheetOption);
	
	
	//设置展示收支表数据  
	incomeStatementOption['title']['text']="各月收支趋势图"	
	incomeStatementOption['xAxis']['data']= dataValue["income_statement_value"]['date_time']	
	incomeStatementOption['series'][0]['data']= dataValue["income_statement_value"]['income']	
	incomeStatementOption['series'][1]['data']= dataValue["income_statement_value"]['expense']	
	incomeStatementChart.setOption(incomeStatementOption);
	
	//设置现金流表数据
	cashFlowOption['title']['text']="各月现金流趋势图"	
	cashFlowOption['xAxis']['data']= dataValue["cash_flow_value"]['date_time']	
	cashFlowOption['series'][0]['data']= dataValue["cash_flow_value"]['inflow']	
	cashFlowOption['series'][1]['data']= dataValue["cash_flow_value"]['outflow']	
	cashFlowChart.setOption(cashFlowOption);
	
	//设置负债表数据
	debtValueOption['title']['text']="各月负债趋势图"	
	debtValueOption['xAxis']['data']= dataValue["debt_value"]['date_time']	
	debtValueOption['series'][0]['data']= dataValue["debt_value"]['huabei']	
	debtValueOption['series'][1]['data']= dataValue["debt_value"]['credit']	
	debtValueChart.setOption(debtValueOption);
	
	
}
  
  
  </script>
</body>
</html>

'''